<template>
    <a-drawer :title="title" :width="500" @close="handleCancel" :visible="visible" :maskClosable="false"
              :bodyStyle="{ paddingBottom: '60px' }">

        <a-form-model ref="ruleForm" :model="form" :rules="rules">

            <a-row :gutter="[8,8]">
                <a-col :span="24">
                    <a-form-model-item label="所属酒店" prop="hotelId" ref="hotelId" >
                        <a-select placeholder="请选择房型所属酒店" allowClear showSearch v-model="form.hotelId">
                            <a-select-option v-for="(item, z) in HotelProfileOPT" :key="z" :value="item.value">
                                {{item.label }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-col>
                <a-col :span="24">
                    <a-form-model-item label="房型图片" prop="picture" ref="picture">
                        <a-upload
                                list-type="picture-card"
                                class="avatar-uploader"
                                :show-upload-list="false"
                                :before-upload="beforeUpload"
                                @change="handleChange"
                                :customRequest="customRequest"
                        >
                            <img v-if="form.picture" :src="form.picture" class="picture" alt="房型图片"/>
                            <div v-else>
                                <a-icon :type="loading ? 'loading' : 'plus'"/>
                                <div class="ant-upload-text">上传房型图</div>
                            </div>
                        </a-upload>
                    </a-form-model-item>

                </a-col>


                <a-col :span="12">
                    <a-form-model-item label="房型名称" prop="name" ref="name">
                        <a-input placeholder="请设置房型名称" v-model="form.name"/>
                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item label="市场价" prop="marketPrice" ref="marketPrice">

                        <a-input-number
                                style="width: 100%" :min="0" :max="99999"
                                placeholder="请选择房型的市场价" v-model="form.marketPrice"
                        />

                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item label="促销价" prop="salePrice" ref="salePrice">

                        <a-input-number
                                style="width: 100%" :min="0" :max="99999"
                                placeholder="请选房型对应的促销价" v-model="form.salePrice"
                        />

                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item label="床型" prop="bedType" ref="bedType">

                        <a-select placeholder="请选择床型" allowClear showSearch v-model="form.bedType">
                            <a-select-option v-for="(item, i) in BedTypeOPT" :key="i" :value="item.value">{{
                                item.label }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item label="房型面积" prop="area" ref="area">

                        <a-input
                                placeholder="请设置房型大致面积" v-model="form.area"
                                addon-after="平方米"
                        />

                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item label="可住人数" prop="capacity" ref="capacity">

                        <a-input-number
                                style="width: 100%" :min="0" :max="99999"
                                placeholder="请设置房型可住人数" v-model="form.capacity"
                        />

                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item label="是否有窗" prop="window" ref="window">

                        <a-select placeholder="请设置房型窗户信息" allowClear showSearch v-model="form.window">
                            <a-select-option v-for="(item, x) in WindowOPT" :key="x" :value="item.value">{{
                                item.label }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item label="网络服务" prop="network" ref="network">

                        <a-select placeholder="请选择房型提供的网络服务情况" allowClear showSearch v-model="form.network">
                            <a-select-option v-for="(item, index) in NetworkOPT" :key="index" :value="item.value">{{
                                item.label }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item label="早餐服务" prop="breakfast" ref="breakfast">

                        <a-select placeholder="是否提供早餐服务" allowClear showSearch v-model="form.breakfast">
                            <a-select-option v-for="(item, j) in BreakfastOPT" :key="j" :value="item.value">{{
                                item.label }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item label="楼层情况" prop="floor" ref="floor">
                        <a-input placeholder="请设置房型分布楼层" v-model="form.floor"/>

                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item label="卫浴情况" prop="bathroom" ref="bathroom">
                        <a-select placeholder="请设置房型的卫浴情况" allowClear showSearch v-model="form.bathroom">
                            <a-select-option v-for="(item, y) in BathRoomOPT" :key="y" :value="item.value">{{
                                item.label }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item label="床头电话" prop="telephone" ref="telephone">
                        <a-select placeholder="当前房型是否提供床头电话" allowClear showSearch v-model="form.telephone">
                            <a-select-option v-for="(item, z) in TelephoneOPT" :key="z" :value="item.value">{{
                                item.label }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-col>


            </a-row>


        </a-form-model>
        <!-- Modal 页脚 -->
        <footer class="drawer-footer">
            <a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button>
        </footer>
    </a-drawer>
</template>
<script>
    import {roomTypeAdd, roomTypeUpdate} from '../../public/http.js';
    import {dictLoad, fileUpload, hotelProfileDict} from '../../../../util/internal.api';

    export default {
        props: ['editRecord'],
        data() {
            return {
                isUpdate: false, //是否是更新模式
                loading: false, //按钮Loading
                title: '新增酒店房型',
                visible: true, //modal 显示状态

                BedTypeOPT: [], //床型选项
                WindowOPT: [], //窗户选项
                NetworkOPT: [],//网络服务选项
                BreakfastOPT: [],//早餐服务选项
                BathRoomOPT: [], //卫浴选项
                TelephoneOPT: [], //电话选项
                HotelProfileOPT:[], //所属酒店

                form: {
                    hotelId:undefined,
                    picture: "",
                    name: null,
                    marketPrice: null,
                    salePrice: null,
                    bedType:undefined,
                    area:null,
                    capacity:null,
                    window:undefined,
                    network:undefined,
                    breakfast:undefined,
                    floor: null,
                    bathroom:undefined,



                    telephone: undefined,
                },
                rules: {
                    hotelId:{
                        required: true,
                        message: '请选择房型所属酒店',
                        trigger: 'blur'
                    },

                    name: [
                        {
                            required: true,
                            message: '房型名称不能为空',
                            trigger: 'blur'
                        },
                        {
                            max: 10,
                            message: '会员等级名称最多设置10个字符',
                            trigger: 'blur'
                        }
                    ],


                    marketPrice: {
                        required: true,
                        message: '房型市场价不能为空',
                        trigger: 'blur'
                    },
                    salePrice: {
                        required: true,
                        message: '房型促销价不能为空',
                        trigger: 'blur'
                    },
                    bedType:{
                        required: true,
                        message: '请设置房间床型',
                        trigger: 'blur'
                    },

                    area:{
                        required: true,
                        message: '请设置大约房型面积',
                        trigger: 'blur'
                    },

                    capacity:{
                        required: true,
                        message: '请设置房型可住人数',
                        trigger: 'blur'
                    },
                    window:{
                        required: true,
                        message: '请选择房型窗户情况',
                        trigger: 'blur'
                    },

                    network :{
                        required: true,
                        message: '请选择房型网络情况',
                        trigger: 'blur'
                    },
                    breakfast :{
                        required: true,
                        message: '请选择房型早餐服务',
                        trigger: 'blur'
                    },
                    floor :{
                        required: true,
                        message: '请填写房型所在楼层',
                        trigger: 'blur'
                    },

                    bathroom :{
                        required: true,
                        message: '请选择房型卫浴情况',
                        trigger: 'blur'
                    },

                    telephone  :{
                        required: true,
                        message: '请选择房型床头电话服务',
                        trigger: 'blur'
                    },
                    picture  :{
                        required: true,
                        message: '请上传一张房型图片',
                        trigger: 'blur'
                    },
                },

            };
        },
        methods: {

            //表单提交事件
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    //验证成功后进行数据提交
                    if (valid) {
                        this.loading = true;
                        if (this.isUpdate) {
                            roomTypeUpdate(this.form.id, this.form).then(res => {
                                this.$exMod.ajaxMessage(res);
                                if (res.code === 0) {
                                    this.handleCancel(true);
                                }
                            });

                        } else {
                            roomTypeAdd(this.form).then(res => {
                                this.$exMod.ajaxMessage(res);
                                if (res.code === 0) {
                                    this.handleCancel(true);
                                }
                            });
                        }
                    }
                });
            },


            //关闭弹窗
            handleCancel(render = false) {
                this.visible = false;
                this.$emit('closeFun', {render: render});
            },
            //表单初始化
            fromVal() {
                let obj = {...this.editRecord};
                if (obj.id) {
                    this.form = obj;
                    this.isUpdate = true;
                    this.title = '编辑房型信息';
                }
            },
            //数据初始化
            async init() {
                await dictLoad("HotelBedType").then(res => this.BedTypeOPT = res);
                await dictLoad("HotelWindow").then(res => this.WindowOPT = res);
                await dictLoad("HotelNetwork").then(res => this.NetworkOPT = res);
                await dictLoad("HotelBathRoom").then(res => this.BathRoomOPT = res);
                await dictLoad("HotelBreakfast").then(res => this.BreakfastOPT = res);
                await dictLoad("HotelTelephone").then(res => this.TelephoneOPT = res);
                await  hotelProfileDict().then(res=> this.HotelProfileOPT=res);

                this.fromVal();

            },


            //酒店系统长传方法
            customRequest(e) {
                const formData = new FormData();
                formData.append('file', e.file)
                fileUpload(formData).then((res) => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.form.picture = res.data.url;
                    }
                })
            },
            //监听上传状态  uploading 开始
            handleChange(info) {

                if (info.file.status === 'uploading') {
                    this.loading = true;
                }
            },
            //上传之前数据检查
            beforeUpload(file) {
                const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
                if (!isJpgOrPng) {
                    this.$message.error('只允许上传JPG、PNG格式的图片文件');
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('单个文件图片不能超过 2MB!');
                }
                return isJpgOrPng && isLt2M;
            },

        },
        created() {
            this.init();
        }
    };
</script>

<style scoped>

    .picture {
        width: 200px;
        height: 100px;
        overflow: hidden;
    }

</style>
